<template>
    <div class="index">
      


            <div class="product">
                <h2>物料清单详情</h2>
                <el-table :data="tableData" style="width: 90%; margin: 5px auto 30px;" border
                :header-cell-style="{'text-align':'center' }"
             :cell-style="{'text-align':'center'}">
                    <el-table-column prop="displayName" label="组件名称">
                        <template slot-scope="scope">
                        <div @click="stockdetail(scope.row)">
                            <a href="javascript:;">{{ scope.row.displayName }}</a>
                        </div>
                    </template>
                    </el-table-column>
                    <el-table-column prop="productQty" label="组件需求数量">
                    </el-table-column>
                    <el-table-column prop="productUomName" label="单位">
                    </el-table-column>
                    <el-table-column prop="stockNum" label="产品实际库存">
                    </el-table-column>
                </el-table>
            </div>
            <!-- <div class="line">
                <el-divider></el-divider>
            </div> -->
            
       
        <div class="product">
                <h2>操作记录</h2>
            <el-table :data="tableData2" style="width: 90%;margin: 5px auto 30px;;" border
            :header-cell-style="{'text-align':'center' }"
             :cell-style="{'text-align':'center'}">


                <el-table-column prop="handleMan" label="操作人">
                </el-table-column>
                <el-table-column prop="handleType" label="操作类型">
                </el-table-column>
                <el-table-column prop="recordTime" label="操作时间">
                </el-table-column>
                <!-- <el-table-column prop="handleNum" label="操作数量">
                </el-table-column> -->
                <el-table-column prop="bomMsg" label="操作信息">
                </el-table-column>

            </el-table>
        </div>
        <!-- 库存详情弹框 -->
     <div v-if="showStockCD">
        <el-dialog :visible.sync="openStock" width="1500px" append-to-body :destroy-on-colse="true" @close='closeDialog'> 
            <Stockdetail :fid="stockid"></Stockdetail>
        </el-dialog>
    </div>
    </div>
</template>
<script>
import { bomParts,bomMsg } from "@/api/system/bom";
export default {
    data() {
        return {
            // 是否显示弹框，用来解决第二次弹框组件内容没变化的问题
           showStockCD:true,
            // 传给库存详情页的id
            stockid: null,
            // 库存详情弹框
            openStock: false,
            result: {},
            result2: {},
            tableData: [],
            tableData2:[]
        };
    },
    mounted() {
        // 通过$route.query将传过来的值接收;
        let id = this.$route.query.listId;
        // this.tableData = this.$route.query.manageList;
        this.getList(id);
        this.getdetail(id)
    },
    methods: {
        getList(id) {
            bomParts(id).then(res => {
                // console.log(res);
                this.tableData = res.data
                // this.result2 = res.data[1]
                // console.log(this.result);
            })
        },
        getdetail(id) {
            bomMsg(id).then(res => {
                // console.log(res);
                this.tableData2=res.data
            })
        },
        // 点击产品名称弹出详情
        stockdetail(row) {
            // console.log(row)
            this.showStockCD=true
            this.stockid = row.productTemplateId
            this.openStock = true
           
        },
         // 关闭弹框的时候销毁内容  再次点击重新创建
         closeDialog() {
             this.showStockCD=false
        },
    },
    components: {
        Stockdetail: () => import('@/views/system/stockdetail/index.vue')
    },
    props: {},
    watch: {},
    computed: {},
    created() { },
};
</script>
<style lang="scss"  scoped>
// @import "~@/assets/styles/detail.scss";
.index {
    // background: #f9f9f9;
    border: 1px transparent solid;


}

.detail {
    background: #fff;
    border: 1px rgb(232, 228, 228) solid;
    // box-shadow: 0 3px 20px -15px #000000;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: 10px auto;
    width: 80%;

    .tab {
        width: 90%;
        margin: 20px auto;
    }

}

h2 {
    text-align: center;
}
.product {
    width: 80%;
    background: #fff;
    border: 1px rgb(232, 228, 228) solid;
    // box-shadow: 0 3px 20px -15px #000000;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: 10px auto;
}

// .detail {
//     margin: 30px auto;
//     width: 80%;
//     .tab {
//         width: 80%;
//         margin: 20px auto;
//     }

// }

// .my-content {
//     background: #1f1e1e;
// }


// ::v-deep .el-descriptions-item__label.is-bordered-label {
//     font-weight: bold;
//     color: #6d6a6a;
//     background: #fdfcfc;
// }
</style>